<template>
  <view class="page">
    <view class="page-head">
      <image class="bg" src="../../../static/img/my/bg.png" mode="scaleToFill"></image>
      <view class="h6" v-if="!isLogin" @tap="jumpLogin">注册/登录</view>
      <view class="head-wrap">
        <image :src="userHead" mode="aspectFill"></image>
        <h5 class="user-name">{{userName}}</h5>
      </view>
      <view class="head-info">
        <view class="info-item" @tap="jump" data-title="integral">
          <text>积分</text>
          <text class="num">{{userInfo.integral}}</text>
        </view>
        <view class="info-item" @tap="jump" data-title="collect">
          <text>收藏</text>
          <text class="num">{{userInfo.collect}}</text>
        </view>
        <view class="info-item" @tap="jump" data-title="message">
          <text>消息</text>
          <text class="num">{{userInfo.message}}</text>
        </view>
      </view>
    </view>
    <!-- 用户信息 -->
    <view class="card">
      <view class="list">
        <view class="list-item" @tap="jump" data-title="info">
          <image src="../../../static/img/my/info.png" mode="widthFix"></image>
          <text>完善资料</text>
        </view>
        <view class="list-item" @tap="jump" data-title="comment">
          <image src="../../../static/img/my/comment.png" mode="widthFix"></image>
          <text>我的评论</text>
        </view>
        <view class="list-item" @tap="jump" data-title="price">
          <image src="../../../static/img/my/price.png" mode="widthFix"></image>
          <text>咨询费</text>
        </view>
      </view>
    </view>
    <!-- 设置 -->
    <view class="card card-setting">
      <view class="list">
        <!-- <view class="list-item">
          <image src="../../../static/img/my/manual.png" mode="widthFix"></image>
          <text>用户手册</text>
        </view> -->
        <view class="list-item" @tap="jump" data-title="setting">
          <image src="../../../static/img/my/setting.png" mode="widthFix"></image>
          <text>设置</text>
        </view>
      </view>
    </view>
	
	<view style="text-align: center; bottom: 60rpx; position: fixed; width: 100vw;" @tap="callPhone">
		联系客服：17769537971（微信同号）</view>
	
  </view>
</template>

<script>
  import {
    getHcp
  } from '@/utils/api';
  export default {
    data() {
      return {
        userName: 'xxx',
        userHead: '../../../static/img/my/user.png',
        isLogin: false,
        userInfo: {
          integral: 0,
          collect: 0,
          message: 0,
        }
      }
    },
    onShow() {
      let auth_token = uni.getStorageSync("auth_token");
      // auth_token = ''
      // console.log(auth_token)
      if (auth_token) {
        this.isLogin = true;
        this.queryUser(); // 查询用户信息
      } else {
        this.isLogin = false;
        this.userHead = '../../../static/img/my/user.png';
        this.userName = '未登录'
        this.userInfo = {
          integral: 0,
          collect: 0,
          message: 0
        }
      }
    },
    methods: {
		callPhone(){
			uni.makePhoneCall({
			    phoneNumber: '17769537971',
				success: (res) => {
					console.log('调用成功!')	
				},
				fail: (res) => {
					console.log('调用失败!')
				}
			  });
		},
      // 查询用户信息
      async queryUser() {
        let res = await getHcp();
        if (res.status === 0) {
          let userInfo = res.data;
          uni.setStorageSync("userInfo", res.data);
          this.userHead = userInfo.avatar || '../../../static/img/my/user_login.png';
          this.userName = userInfo.name || userInfo.phone;
          this.userInfo = {
            integral: userInfo.bonus || 0,
            collect: userInfo.favorited || 0,
            message: userInfo.msgNum || 0,
          }
        } else {
          uni.showToast({
            title: res.message,
            icon: 'none',
            duration: 2000
          });
        }
      },
      jump(e) {
        let title = e.currentTarget.dataset.title;
        // if (!this.isLogin && title !== 'setting') {
        //   uni.navigateTo({
        //     url: `/pages/user/no_login/no_login?title=${title}`
        //   })
        //   return
        // }

        let url;
        switch (title) {
          case 'integral':
            url = '/pages/integralCenter/integralCenter'
            break;
          case 'collect':
            url = '/pages/user/collect/collect'
            break;
          case 'message':
            url = '/pages/user/message/message'
            break;
          case 'comment':
            url = '/pages/user/comment/comment'
            break;
          case 'setting':
            url = '/pages/user/setting/setting'
            break;
          case 'price':
            url = '/pages/user/price/price'
            break;
          case 'info':
            url = '/pages/user/info/base'
            break;
        }
        uni.navigateTo({
          url: url
        })
      },
      // 跳转到登录页面
      jumpLogin() {
        uni.navigateTo({
          url: '/pages/login/login'
        })
      }
    }
  }
</script>

<style>
  .page {
    background: #F4F4F4;
	height: 100vh;
  }

  .page-head {
    position: relative;
    height: 445upx;
    padding-top: var(--status-bar-height);
    color: #333;
  }

  .page-head .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .page-head .h6 {
    position: absolute;
    right: 30upx;
    top: 60upx;
    top: var(--status-bar-height);
    font-weight: 300;
    font-size: 24upx;
    z-index: 100;
  }

  .head-wrap {
    position: relative;
    z-index: 10;
    text-align: center;
    overflow: hidden;
    line-height: 1;
  }

  .head-wrap h5 {
    line-height: 90upx;
    font-size: 26upx;
    font-weight: 300;
  }

  .head-wrap image {
    margin-top: 60upx;
    width: 145upx;
    height: 145upx;
    border-radius: 50%;
  }

  .head-info {
    font-size: 30upx;
    font-weight: 400;
    display: flex;
    justify-content: space-around;
  }

  .head-info .info-item {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    position: relative;
  }

  .head-info .info-item+.info-item:before {
    position: absolute;
    left: 0;
    content: "|";
  }

  .head-info .num {
    text-decoration: underline;
    margin-top: 20upx;
    line-height: 36upx;
  }

  .card {
    background: #fff;
  }

  .card-setting {
    margin-top: 10upx;
  }

  .list-item {
    padding-left: 30upx;
    line-height: 110upx;
  }

  .list-item image {
    width: 40upx;
    height: 40upx;
    vertical-align: middle;
    margin-right: 30upx;
  }

  .list-item text {
    font-weight: 400;
    color: #333;
    font-size: 30upx;
  }

  .list-item+.list-item {
    border-top: 1px solid #F4F4F4;
  }
</style>
